<!-- productClassify 商品分类 -->
<template>
  <div class="content">
    <div class="content-btn">
      <Cbutton @click="handleAdd">新建商品分类</Cbutton>
    </div>
    <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.children" border fit>
            <el-table-column prop="name" label="商品分类" align="center"></el-table-column>
            <el-table-column prop="icon" label="分类图片" align="center">
              <template slot-scope="scope">
                <el-image :src="scope.row.icon || ''" style="width: 50px; height: 50px" fit="fit" :preview-src-list="scope.row.icon ? [scope.row.icon] : []"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="创建时间" align="center">
              <template slot-scope="scope">{{scope.row.createTime | glbTimeFormat}}</template>
            </el-table-column>
            <el-table-column prop="sumProduct" label="商品数量" align="center">
              <template slot-scope="scope">{{scope.row.sumProduct || 0}}</template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
            <el-table-column prop="showStatus" label="显示/隐藏" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.showStatus === 1" type="success">显示</el-tag>
                <el-tag v-if="scope.row.showStatus !== 1" type="danger">隐藏</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="handleEdit(scope.row)">修改</el-button>
                <el-button v-if="scope.row.showStatus === 0" type="text" size="medium" @click="hanldleEnableUser(scope.row)">显示</el-button>
                <el-button v-if="scope.row.showStatus === 1" type="text" size="medium" style="color: #E6A23C" @click="hanldleEnableUser(scope.row)">隐藏</el-button>
                <el-button type="text" size="medium" style="color: #F56C6C" @click="handleRemove(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- <el-table-column type="index" label="序号" align="center" width="70"></el-table-column> -->
      <el-table-column prop="name" label="商品分类" align="center"></el-table-column>
      <el-table-column prop="area" label="创建时间" align="center">
        <template slot-scope="scope">{{scope.row.createTime | glbTimeFormat}}</template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center"></el-table-column>
      <el-table-column prop="sumProduct" label="商品数量" align="center">
        <template slot-scope="scope">{{scope.row.sumProduct || 0}}</template>
      </el-table-column>
      <el-table-column prop="showStatus" label="显示/隐藏" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.showStatus === 1" type="success">显示</el-tag>
          <el-tag v-if="scope.row.showStatus !== 1" type="danger">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" min-width="120px">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="handleEdit(scope.row)">修改</el-button>
          <el-button v-if="scope.row.showStatus === 0" type="text" size="medium" @click="hanldleEnableUser(scope.row)">显示</el-button>
          <el-button v-if="scope.row.showStatus === 1" type="text" size="medium" style="color: #E6A23C" @click="hanldleEnableUser(scope.row)">隐藏</el-button>
          <el-button type="text" size="medium" style="color: #F56C6C" @click="handleRemove(scope.row)">删除</el-button>
          <el-button type="text" size="medium" @click="handleAdd(scope.row)">添加子类</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新建商品分类 修改服商品分类 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.mVisible" v-if="dialog.mVisible" :close-on-click-modal="false"
               width="600px" class="dialog-form">
      <el-form :model="dialog.data" :rules="dialog.rules" ref="DlalogForm" size="medium" label-width="130px">
        <el-form-item label="分类名称：" prop="name">
          <el-input v-model="dialog.data.name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="dialog.data.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
        <!-- <el-form-item label="关键字：" prop="keywords">
          <el-input v-model="dialog.data.keywords" placeholder="请输入分类关键字"></el-input>
        </el-form-item>
        <el-form-item label="分类单位：" prop="productUnit">
          <el-input v-model="dialog.data.productUnit" placeholder="请输入分类单位"></el-input>
        </el-form-item> -->
        <el-form-item label="是否显示：" prop="showStatus">
          <el-radio-group v-model="dialog.data.showStatus">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="导航栏显示：" prop="navStatus">
          <el-radio-group v-model="dialog.data.navStatus">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类描述：" prop="description">
          <el-input type="textarea" v-model="dialog.data.description" placeholder="请输入分类描述"></el-input>
        </el-form-item>
        <el-form-item label="分类图标：" prop="icon">
          <Upload v-if="dialog.oprType=== 'ADD'" v-model="dialog.data.icon" :limit="1" :limitSize="{width: 120, height: 120}"></Upload>
          <Upload v-if="dialog.oprType=== 'EDIT'" v-model="dialog.data.icon" :fileLists="dialog.data.icon ? [dialog.data.icon] : []"
                  :limit="1" :limitSize="{width: 120, height: 120}"></Upload>
          <span class="form-tips" style="color: rgba(230, 162, 60, .7); font-size: 12px; line-height: 20px;">上传图片尺寸为120*120</span>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCanale('DlalogForm')">取 消</el-button>
        <el-button size="medium" :loading="dialog.loading" type="primary" @click="handleDiaSub('DlalogForm')">确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 新建商品分类 修改商品分类 -->

  </div>
</template>

<script>
import Upload from '@/components/Upload/edit'
import { GetProductClassifyList, AddProductClassify, UpdateProductClassify, ProductCategoryShowStatus, RemoveProductCategory } from '@/api/onlineMan'
import { productClassRules } from '@/utils/rules'
export default {
  name: 'productClassify',
  components: { Upload },
  data () {
    return {
      query: {
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,

      dialog: {
        title: '',
        mVisible: false,
        loading: false,
        oprType: 'ADD',
        data: {
          id: '',
          name: '',
          sort: '',
          showStatus: '1',
          navStatus: '0',
          icon: '',
          // keywords: '',
          // productUnit: '',
          description: ''
        },
        originData: {
          id: '',
          name: '',
          sort: '',
          showStatus: '1',
          navStatus: '0',
          icon: '',
          // keywords: '',
          // productUnit: '',
          description: ''
        },
        rules: productClassRules
      }
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      GetProductClassifyList().then(res => {
        const data = res.data
        this.tableList = data
        // this.totalCount = data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleEdit (row) {
      this.dialog.title = '修改'
      this.dialog.mVisible = true
      this.dialog.oprType = 'EDIT'
      for (const key in this.dialog.data) {
        if (key === 'showStatus' || key === 'navStatus') {
          this.dialog.data[key] = row[key].toString()
        } else {
          this.dialog.data[key] = row[key]
        }
      }
      console.log(this.dialog.data)
      this.dialog.data.id = row.id
      this.dialog.data.parentId = row.parentId ? row.parentId : '0'
    },
    handleAdd (row) {
      this.dialog.mVisible = true
      this.dialog.oprType = 'ADD'
      for (const key in this.dialog.data) {
        this.dialog.data[key] = this.dialog.originData[key]
      }
      if (row) {
        this.dialog.data.parentId = row.id
        this.dialog.title = `添加 ${row.name} 分类的子类`
      } else {
        this.dialog.title = '新建分类'
        this.dialog.data.parentId = '0'
      }
    },
    handleCanale (formName) {
      this.dialog.mVisible = false
      this.$refs[formName].resetFields()
    },
    handleDiaSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.dialog.loading = true
        if (this.dialog.oprType === 'ADD') {
          const parmas = JSON.parse(JSON.stringify(this.dialog.data))
          AddProductClassify(parmas).then(res => {
            this.getList()
            this.$message.success(res.message || '操作成功')
            this.dialog.loading = false
            this.dialog.mVisible = false
          }).catch(() => {
            this.dialog.loading = false
          })
        }
        if (this.dialog.oprType === 'EDIT') {
          let parmas = {}
          parmas.id = this.dialog.data.id
          parmas.parentId = this.dialog.data.parentId
          parmas.name = this.dialog.data.name
          parmas.sort = this.dialog.data.sort
          parmas.showStatus = this.dialog.data.showStatus
          parmas.navStatus = this.dialog.data.navStatus
          parmas.description = this.dialog.data.description
          parmas.icon = this.dialog.data.icon

          UpdateProductClassify(parmas).then(res => {
            this.getList()
            this.$message.success(res.message || '操作成功')
            this.dialog.loading = false
            this.dialog.mVisible = false
          }).catch(() => {
            this.dialog.loading = false
          })
        }
      })
    },
    // '隐藏 显示'
    hanldleEnableUser (row) {
      let tips = row.showStatus === 1 ? '隐藏' : '显示'
      let parmas = {
        ids: [row.id],
        showStatus: row.showStatus === 1 ? '0' : '1'
      }

      this.$confirm(`确定要${tips}该商品分类吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ProductCategoryShowStatus(parmas).then(res => {
          this.getList()
        }).catch(() => { })
      }).catch(() => { })
    },

    handleRemove (row) {
      this.$confirm(`确定要删除该商品分类吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        RemoveProductCategory({ ids: [row.id] }).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
